<template>
  <van-pull-refresh v-model="refreshing">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="m-favoriteListModule" @click="zhuan">
        <div class="m-favorite-title">
          为你精选
        </div>
        <div class="tm-wrap">
          <div class="tm-goodInGrid" v-for="item in list" :key="item.id">
            <div class="hd">
              <div class="wraper">
                <img :src="item.listPicUrl" alt="">
              </div>
            </div>
            <div class="name">
              <img class="preLogo" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt="">
              {{ item.name }}
            </div>
            <div class="price">
              <span>
                <span>
                  <span style="color: rgb(250, 30, 50); font-weight: bold;">
                    <span style="font-size: 12px;">¥</span>
                    <span style="font-size: 20px;">{{ item.finalPriceInfoVO.priceInfo.basicPrice }}</span>
                    <!-- <span style="font-size: 12px;">.8</span> -->
                  </span>
                </span>
                <span>
                  <span style="color: rgb(153, 153, 153); font-weight: 300; margin-left: 0.04rem;">
                    <span style="font-size: 12px;">¥</span>
                    <span style="font-size: 12px; text-decoration:line-through">{{
                      item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
                  </span>
                </span>
              </span>
            </div>
            <div class="banner-wrap">
              <div class="banner formal" style="font-size: 2px;">
                <img class="icon" src="//yanxuan.nosdn.127.net/b268d0d2f46c41d3b3edf5fa33eea3de.png" alt="">
                <div class="content">
                  <div class="left">
                    <span class="title">特价</span>
                  </div>
                  <div class="right">仅剩1天</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ItemLists } from '@/api/home'
import { useRouter } from 'vue-router';
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const props = defineProps<{
  DataLists: any
  getDataList: any
}>()
const router = useRouter()
function zhuan() {
  router.replace('/Homeitem')
}

const onLoad = async () => {
  if (loading.value) {
    try {
      let res = await props.getDataList()
      if (res == 'ok') {
        loading.value = false;
      }
    } catch (error) {
      finished.value = true;
    }
  }
}
const list = ref<ItemLists[]>([])
list.value = props.DataLists
console.log(list.value)
</script>

<style scoped lang="less">
.m-favoriteListModule {
  width: 100%;

  .m-favorite-title {
    width: 365px;
    height: 27px;
    margin: 0 0 10px 10px;
    color: #333;
    font-size: 18px;
    font-weight: 700;
  }

  .tm-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .tm-goodInGrid {
      width: 44%;
      margin: 10px 10px;

      .hd {
        border-radius: 6%;
        position: relative;
        z-index: 0;
        background-color: #f4f4f4;

        .wraper {
          position: relative;
          padding-bottom: 100%;

          img {
            position: absolute;
            display: block;
            width: 172.5px;
            height: 172.5px;
            border-radius: 6%;
            background-color: #f4f4f4;
          }
        }
      }

      .name {
        width: 172.5px;
        height: 40px;
        line-height: 40px;
        margin: 6px 0 0;
        font-size: 14px;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #12161c;

        .preLogo {
          width: 15px;
          height: 15px;
          margin: 0 5px 0 0;
        }
      }

      .price {
        display: flex;
        align-items: center;
      }

      .banner-wrap {
        margin-top: 10px;

        // display: flex;
        .banner {
          position: relative;
          height: 23px;
          border-radius: 20%;
          padding: 0 0 0 6px;
        }

        .formal {
          line-height: 23px;
          padding: 0 0 0 6px;
          color: #fa1e32;
          background-color: #ffe9eb;
          font-weight: bold;

          .icon {
            position: absolute;
            top: -0.025px;
            left: 0.18px;
            width: 0.1px;
            height: 0.03px;
          }

          .content {
            display: flex;
            align-items: center;
            position: absolute;

            .left {
              color: #fff;
              width: 36px;
              height: 19px;
              display: flex;
              align-items: center;
              line-height: 19px;
              padding: 2px 6px;
              font-size: 12px;
              border-radius: 35%;
              background-color: #fa1e32;

              .title {
                padding: 6px;
                white-space: nowrap;
                font-weight: 600;
              }
            }

            .right {
              width: 61.35px;
              height: 19px;
              line-height: 19px;
              font-size: 12px;
              margin: 0 0 0 4px;
              overflow: hidden;
              font-weight: 700;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .topLogo {
        position: relative;
        top: 0;
        right: 0;
      }
    }
  }

}
</style>